<script setup lang="ts">
import BlockBox from '../BlockBox.vue';
import TableItem from "../../../docs/views/table-block/src/tableType/TableItem.vue";
import EventTableItem from "../../../docs/views/table-block/src/tableType/EventTableItem.vue";
import MethodTableItem from "../../../docs/views/table-block/src/tableType/MethodTableItem.vue";
import SlotTableItem from "../../../docs/views/table-block/src/tableType/SlotTableItem.vue";
const tableItemList = {
  tableType: 'tableItem',
  list: [
    {
      name: 'percentage',
      remark: '百分比（必填）',
      type: 'number',
      optional: '0-100	',
      showTip: true,
      default: '0',
      version: '1',
    },
    {
      name: 'text-inside',
      remark: '进度条显示文字内置在进度条内（只在 type=line 时可用）',
      type: '1',
      optional: '1',
      showTip: true,
      default: '1',
      version: '1',
    }
  ]
}
const eventTableItemList = {
  tableType: 'eventTableItem',
  list: [
    {
      name: 'change',
      remark: '当绑定值变化时触发',
      params: 'number',
      showTip: true,
      version: '1',
    },
    {
      name: 'active-change',
      remark: '面板中当前显示的颜色发生改变时触发',
      params: 'number',
      showTip: true,
      version: '1',
    }
  ]
}
const methodTableItemList = {
  tableType: 'methodTableItem',
  list: [
    {
      name: 'focus',
      remark: '使 input 获取焦点',
      params: 'number',
      returns: '0-100	',
      showTip: true,
      version: '1',
    },
    {
      name: 'text-inside',
      remark: '进度条显示文字内置在进度条内（只在 type=line 时可用）',
      params: '1',
      returns: '1',
      showTip: true,
      version: '1',
    }
  ]
}
const slotTableItemList = {
  tableType: 'slotTableItem',
  list: [
    {
      name: 'focus',
      remark: '使 input 获取焦点',
      params: 'number',
      showTip: true,
      version: '1',
    },
    {
      name: 'text-inside',
      remark: '进度条显示文字内置在进度条内（只在 type=line 时可用）',
      params: '1',
      showTip: true,
      version: '1',
    }
  ]
} 
</script>
<template>
  <BlockBox text="表格测试">
    <div style="width: 1000px;">
      <TableItem :tableList="tableItemList"></TableItem>
      <EventTableItem :tableList="eventTableItemList"></EventTableItem>
      <MethodTableItem :tableList="methodTableItemList"></MethodTableItem>
      <SlotTableItem :tableList="slotTableItemList"></SlotTableItem>
    </div>
  </BlockBox>
</template>
<style scoped></style>
